iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

輕鬆Vue一下系列 第 3

Day3-條件渲染(1)

  • 分享至 

  • xImage
  •  

v-if是vue.js框架中扮演條件渲染的角色,有時會利用數據直接進行控制,有時還會加上一些邏輯運算,像是:若在v-if中加入!則意味著將原有的資料否定,true會變falsefalse會變true;有時遇上較複雜的條件則會再配合v-else和v-if-else這兩個元素一起使用。
https://ithelp.ithome.com.tw/upload/images/20190919/20112076uao7AznYRS.jpg
1.在這裡利用seen的值來控制網頁內容,當seen的值為true則:
https://ithelp.ithome.com.tw/upload/images/20190919/20112076X5XKb5Tam4.jpg
seen的值為false則:
https://ithelp.ithome.com.tw/upload/images/20190919/20112076H2M93qv7eL.jpg

https://ithelp.ithome.com.tw/upload/images/20190919/20112076pXh6NnZadS.jpg
2.在這裡利用seen的值來控制網頁內容,當seen的值為a則:
https://ithelp.ithome.com.tw/upload/images/20190919/20112076reGuV6Sijf.jpg
seen的值為b則:
https://ithelp.ithome.com.tw/upload/images/20190919/20112076870xQIuYoa.jpg
seen的值不為a也不為b則:
https://ithelp.ithome.com.tw/upload/images/20190919/201120768ILbftqjFE.jpg
明日預告:條件渲染(2)


上一篇
Day2-Hello Vue
下一篇
Day4-條件渲染(2)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言